<script setup lang="ts">
import { type PlusColumn, PlusSearch } from "plus-pro-components";
import "plus-pro-components/es/components/search/style/css";
import { PaginationProps } from "@pureadmin/table";
import { computed, onMounted, reactive, ref } from "vue";
import { getDataBySQLDesc } from "@/api/common";
defineOptions({
  name: "ProductionLinePlan"
});
const loading = ref(false);
const form = ref({
  gddjb: "",
  gdzt: [],
  jssj: "",
  kssj: "",
  rkzt: "Y"
});
const searchColumns: PlusColumn[] = [
  // {
  //   label: "工单单据别",
  //   prop: "gddjb",
  //   valueType: "select",
  //   placeholder: "请选择工单单据别",
  //   options: [],

  // },
  // {
  //   label: "工单状态",
  //   multiple: true,
  //   prop: "gdzt",
  //   valueType: "select", placeholder: "请选择工单状态",
  //   options: []

  // },
  {
    label: "开始时间",
    prop: "kssj",

    valueType: "date-picker",
    fieldProps: {
      type: "date",
      valueFormat: "YYYY-MM-DD",
      placeholder: "请选择开始时间"
    }
  },
  {
    label: "结束时间",
    prop: "jssj",
    valueType: "date-picker",
    fieldProps: {
      type: "date",
      valueFormat: "YYYY-MM-DD",
      placeholder: "请选择结束时间"
    }
  }
];
/** 分页配置 */
const pagination = reactive<PaginationProps>({
  pageSize: 10,
  currentPage: 1,
  pageSizes: [10, 15, 20],
  total: 0,
  align: "right",
  background: true,
  size: "default",
  layout: "prev, pager, next"
});
const apiData = ref([]);
const columns = ref([
  {
    prop: "预计开工日",
    label: "日期"
  },
  {
    prop: "当日总单数",
    label: "当日总单数"
  },
  {
    prop: "当日结单数",
    label: "当日结单数"
  },
  {
    prop: "当日未结单数",
    label: "当日未结单数"
  },
  {
    prop: "当日总数量",
    label: "当日总数量"
  },
  {
    prop: "当日完成数量",
    label: "当日完成数量"
  },
  {
    prop: "当日未完成数量",
    label: "当日未完成数量"
  }
]);
const getData = async () => {
  let params = {
    action: "biz/reports/get_jh_cxsc_jh",
    gddjb: form.value.gddjb,
    kssj: form.value.kssj ? form.value.kssj + " 00:00:00" : "",
    jssj: form.value.jssj ? form.value.jssj + " 23:59:59" : "",
    rkzt: form.value.rkzt,
    gdzt: form.value.gdzt,
    pageindex: pagination.currentPage.toString(),
    pagesize: pagination.pageSize.toString()
  };
  const { data, total } = await getDataBySQLDesc(params);
  pagination.total = total;
  apiData.value = data;
};
const getZD = async () => {
  let params = {
    action: "public/get_bi_sjfw",
    hsmc: "get_jh_cxsc_jh"
  };
  const { data } = await getDataBySQLDesc(params);
  data.map(e => {
    form.value[e["参数编码"]] = e["参数值"];
  });
  getData();
};
const handleChange = () => { };
const handleSearch = () => {
  getData();
};
const changePagination = () => {
  getData();
};
const handleRest = () => {
  pagination.currentPage = 1;
  getData();
};
onMounted(() => {
  getZD();
});
</script>

<template>
  <div class="page-content">
    <el-card>
      <PlusSearch v-model="form" searchText="搜索" resetText="重置" expand-text="展开" retractText="收起"
        :columns="searchColumns" :show-number="2" label-width="100" label-position="right" @change="handleChange"
        @search="handleSearch" @reset="handleRest" />
    </el-card>
    <el-card class="table-card">
      <div class="operate">
        <el-button type="primary">导出</el-button>
      </div>
      <PureTable ref="tableRef" :loading="loading" border row-key="id" alignWhole="center" showOverflowTooltip
        :data="apiData" :columns="columns" :pagination="pagination" @page-current-change="changePagination" />
    </el-card>
  </div>
</template>
<style lang="css" scoped>
.table-card {
  margin-top: 20px;
}

.operate {
  margin-bottom: 20px;
}
</style>
